<template>
  <div>
    <main-nav-bar />
    <div
      class="user my-scroll"
      :style="{
        background:
          'url(' + bgList[currentIndex] + ') center center no-repeat ',
      }"
    >
      <div class="mybody" ref="mybody">
        <div class="row d-flex justify-content-center aligin-item-center">
          <!-- 左侧用户信息展示 -->
          <div class="col-12 col-md-5 col-lg-3 d-flex flex-column">
            <!-- 头像 -->
            <div class="col-12 d-flex justify-content-center aligin-item-center">
              <div class="card card-left text-center mt-4">
                <div class="card-img-top">
                  <el-avatar :size="110" class="hvr-bounce-in">
                    <img
                      class
                      :src="$store.getters.getUserInfo.avatar"
                      style="cursor: pointer;"
                      @click="goModificatonAvatar"
                      alt
                    />
                  </el-avatar>

                  <h3>{{ $store.state.users.username }}</h3>
                  <span v-if="$store.getters.getUserInfo.sex == '男'">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      fill="currentColor"
                      class="bi bi-gender-male"
                      viewBox="0 0 16 16"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M9.5 2a.5.5 0 0 1 0-1h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V2.707L9.871 6.836a5 5 0 1 1-.707-.707L13.293 2H9.5zM6 6a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"
                      />
                    </svg>男
                  </span>
                  <span v-else>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      fill="currentColor"
                      class="bi bi-gender-female"
                      viewBox="0 0 16 16"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M8 1a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM3 5a5 5 0 1 1 5.5 4.975V12h2a.5.5 0 0 1 0 1h-2v2.5a.5.5 0 0 1-1 0V13h-2a.5.5 0 0 1 0-1h2V9.975A5 5 0 0 1 3 5z"
                      />
                    </svg>
                    女
                  </span>
                </div>
                <div class="card-body">
                  <p class="card-title">手机号：{{ $store.state.users.phone }}</p>
                  <p class="card-title">地址：{{ $store.state.users.address }}</p>

                  <router-link to="/modification" class="hvr-bounce-to-left gohome">修改信息</router-link>
                  <router-link to="/modificatonPassword" class="hvr-bounce-to-left gohome">修改密码</router-link>
                  <router-link to="/homeRegisterPuls" class="hvr-bounce-to-left gohome">升级为公司</router-link>
                </div>
              </div>
            </div>
          </div>
          <!--右侧信息-->
          <div
            class="col-12 col-md-7 col-lg-9 d-flex flex-column justify-content-center aligin-item-center"
          >
            <!-- echars 数据分析 -->

            <div class="card mb-4" style="height:50vh; margin: 0 30px;padding:30px 50px ;">
              <h4>预约信息展示</h4>

              <h1>暂无数据</h1>
            </div>
          </div>
        </div>
      </div>
      <footer style="height:10vh;"></footer>
    </div>
    <!-- 换肤 -->
    <el-tooltip class="item" effect="dark" content="点击可更换背景" placement="top-start">
      <el-button class="changeBg hvr-wobble-horizontal" @click="changeBg">背景</el-button>
    </el-tooltip>
  </div>
</template>

<script>
import MainNavBar from '@/common/NavBar/MainNavBar.vue'
import GoTop from '@/components/GoTop.vue'
import LocationPostion from '@/common/LocationPostion.vue'
import qs from 'qs'
export default {
  data() {
    return {
      currentIndex: 2,
      address: '',
      cityName: '',
      bgList: [
        'https://images.unsplash.com/photo-1567225591450-06036b3392a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80',
        'https://images.unsplash.com/photo-1586807480822-0e95ba6666ad?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80',
        'https://images.unsplash.com/photo-1612490566683-0b3ceabea435?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80',
        'https://images.unsplash.com/photo-1421986527537-888d998adb74?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
      ],
      messageList: [],
      // 分页
      total: 0,
      pageSize: 2,
      currentPage: 1,
      article: [],
      ruleForm: {
        title: '',
        bulletinBoard: '',
      },
      // 公告栏内容
    }
  },
  components: {
    MainNavBar,
    LocationPostion,
    GoTop,
  },
  created() {
    if (window.sessionStorage.getItem('cityName')) {
      this.cityName = window.sessionStorage.getItem('cityName')
    } else {
      this.cityName = '福州市'
    }

    this.getUser()
  },

  methods: {
    //改变背景
    changeBg() {
      this.currentIndex > this.bgList.length - 2
        ? (this.currentIndex = 0)
        : this.currentIndex++
    },
    getUser() {
      this.$http.get('/sys/userInfo').then((res) => {
        this.userInfo = res.data.data.data
        this.$store.commit('setUserInfo', res.data.data)
      })
    },
    //获取我的所有留言
    async getMessages() {
      const data = await this.$http.post(
        '/leavingMessage/getMessageById?' +
          qs.stringify({
            postId: this.$store.getters.getUserInfo.id,
            pageNum: this.currentPage,
            pageSize: this.pageSize,
          })
      )

      if (data.code == 200) {
        this.messageList = data.data.records
        this.total = data.data.records.length
        if (this.total != 0) {
          this.$set(this.dataY, 0, this.total)
          this.showEcharts = true
        }
      }
    },
    //留言分页
    // 当前页数
    handleSizeChange(pageSize) {
      this.currentPage = 1
      this.pageSize = pageSize
      this.getMessages()
    },
    // 跳转页数
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getMessages()
    },

    // 修改头像
    goModificatonAvatar() {
      this.$router.push('/modificationavatar')
    },
  },
}
</script>

<style lang="less" scoped>
.user {
  position: relative;
  height: 100vh;
  transition: 0.5s;
  background-attachment: fixed;
  overflow: scroll;
  overflow-x: hidden;
}
h1 {
  margin-top: 15%;
}
.myhead {
  width: 100%;

  background: transparent;
}
.header-title {
  margin-top: 50%;
  text-align: center;
  color: rgb(250, 240, 240);

  text-align: center;
  font-weight: 700;

  text-shadow: 2px 2px 4px rgb(0, 0, 0, 0.15);
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
    Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;

  animation: scaleUp 3s 1s infinite;
}

.bi-chevron-double-down {
  position: absolute;
  font-size: 2em;
  color: #fff;
  font-weight: 600;
  margin-top: 10%;
  animation: movedown 2s infinite;
}
@keyframes movedown {
  40% {
    margin-top: 12%;
    opacity: 0.5;
  }
}
@keyframes scaleUp {
  40% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(1.2);
  }
}

.mybody {
  transition: 0.5s;
  margin-top: 30%;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
}
.card {
  transition: all 0.3s;
  border-radius: 12px 8px 8px 12px;
}
.card:hover {
  box-shadow: 0 4px 12px 12px rgba(7, 17, 27, 0.15);
}
.card-left {
  width: 20rem;
  height: 25rem;
  padding-top: 1.25rem;
  h3 {
    margin-top: 0.9375rem;
  }
}
//右边一
.gohome {
  display: inline-block;
  width: 28%;
  line-height: 2.5rem;
  margin: 1px 6px;
  text-decoration: none;
  color: #fff;
  background: rgb(73, 177, 245);
}
// 右侧 二
.my-search {
  position: absolute;
  bottom: 10px;
}

.changeBg {
  position: fixed;
  right: 1.875rem;
  bottom: 2.5rem;
}
p {
  text-indent: 0 !important;
}
</style>
